<template>
    <div class="po_details p-8">
        <div class="prompt mb-10">创建方案</div>
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px;text-align: center;"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="广告类型">
                <div class="Grid Grid--center text-sm category-select-btn">
                  <div :class="['item', { active: ruleForm.type == 1 }]" @click="ruleForm.type = 1" style="margin-right: 10px">弹窗广告</div>
                  <div :class="['item', { active: ruleForm.type == 2 }]" @click="ruleForm.type = 2" style="margin-right: 10px">banner广告</div>
                  <div :class="['item', { active: ruleForm.type == 3 }]" @click="ruleForm.type = 3" style="margin-right: 10px">右下角浮窗</div>
                </div>
            </el-form-item>
            <el-form-item label="标题" prop="name">
                <el-input class="ya-select-field" v-model="ruleForm.name" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="展示方式">
                <el-checkbox v-model="isDisplay ">是否展示 "不再提醒" 按钮</el-checkbox>
            </el-form-item>
            <el-form-item label="弹窗位置">
                <el-checkbox-group v-model="ruleForm.checkList">
                    <el-checkbox label="分析师主页" value="home" />
                    <el-checkbox label="方案详情" value="details" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="排序">
                <el-input class="ya-select-field" v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="封面" prop="name">
                <div class="uploadImg" @click=" () => {
                        fileDialog = true
                        uploadFileType = 'description'
                    }">
                    <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                    <div>上传封面</div>
                </div>
                <el-image v-if="ruleForm.cover" style="width: 98px;height: 98px;" :src="ruleForm.cover" fit="contain" />
            </el-form-item>
            <el-form-item label="指定分析师" prop="name">
                <el-cascader class="ya-select-field" :options="options" :props="props" clearable />
            </el-form-item>
            <el-form-item label="开始时间" prop="name">
                <el-date-picker class="ya-select-field" v-model="ruleForm.date1" type="datetime" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD" time-format="HH:mm" placeholder="请设置发布时间"/>
            </el-form-item>
            <el-form-item label="结束时间" prop="name">
                <el-date-picker class="ya-select-field" v-model="ruleForm.date2" type="datetime" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD" time-format="HH:mm" placeholder="请设置发布时间"/>
            </el-form-item>
            <el-form-item label="跳转类型">
                <div class="Grid Grid--center text-sm category-select-btn">
                  <div :class="['item', { active: ruleForm.linkType == 1 }]" @click="ruleForm.linkType = 1" style="margin-right: 10px">站内</div>
                  <div :class="['item', { active: ruleForm.linkType == 2 }]" @click="ruleForm.linkType = 2" style="margin-right: 10px">站外</div>
                </div>
            </el-form-item>
            <el-form-item label="跳转页面">
                <el-select v-model="ruleForm.region" class="ya-select-field" placeholder="请选择跳转页面">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                </el-select>
            </el-form-item>
            <el-form-item label="跳转地址">
                <el-input class="ya-select-field" v-model="ruleForm.name" />
            </el-form-item>
            
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                Create
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form>
        <el-dialog
        v-model="fileDialog"
        :title="fileTitle"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        top="1vh"
        width="80%"
        append-to-body
        >
            <FileManage
            :file-type="fileType"
            :fileSelectType="fileSelectType"
            :isAll="false"
            @file-cancel="fileDialog = false"
            @file-submit="fileSubmit"/>
        </el-dialog>
    </div>
</template> 
<script>
import FileManage from '@/components/FileManage/index.vue'
export default {
    data () {
        return {
            name: 'po_details',
            props:{ multiple: true },
            options: [
            {
                value: 1,
                label: 'Asia',
                children: [
                {
                    value: 2,
                    label: 'China',
                    children: [
                    { value: 3, label: 'Beijing' },
                    { value: 4, label: 'Shanghai' },
                    { value: 5, label: 'Hangzhou' },
                    ],
                },
                {
                    value: 6,
                    label: 'Japan',
                    children: [
                    { value: 7, label: 'Tokyo' },
                    { value: 8, label: 'Osaka' },
                    { value: 9, label: 'Kyoto' },
                    ],
                },
                {
                    value: 10,
                    label: 'Korea',
                    children: [
                    { value: 11, label: 'Seoul' },
                    { value: 12, label: 'Busan' },
                    { value: 13, label: 'Taegu' },
                    ],
                },
                ],
            },
            ],
            fileDialog: false, //文件管理弹窗
            fileSelectType: 'radio', //文件选择类型，单选---多选
            fileType: 'image', //文件类型
            ruleForm: {
                type: 1,
                linkType: 1,
                checkList: [],
                isDisplay: false,
                name: '',
                cover: '',
                region: '',
                count: '',
                date1: '',
                date2: '',
                delivery: false,
                location: '',
                resource: '',
                desc: '',
            },
            rules: {
                name: [
                    { required: true, message: 'Please input Activity name', trigger: 'blur' },
                ],
                region: [
                    {
                    required: true,
                    message: 'Please select Activity zone',
                    trigger: 'change',
                    },
                ],
            }
        }
    },
    components: {
        FileManage
    },
    mounted () {

    },
    methods: {
        // 文件选择回调
        fileSubmit(files) {
            this.ruleForm.cover = files[0]['file_url']
            this.fileDialog = false
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .ya-select-field{
    width: 100% !important;
}
.category-select-btn {
  .item {
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #ffffff;
    color: #666666;
    border: 1px solid #c9c9c9;
    border-radius: 5px;
    box-sizing: content-box;
    cursor: pointer;
  }
  .item.active {
    background-color: #005266;
    color: #ffffff;
    border: 1px solid #005266;
  }
}
.uploadImg {
  text-align: center;
  width: 98px;
  height: 98px;
  line-height: 28px;
  padding-top: 20px;
  margin-right: 12px;
  background: rgb(247, 247, 247);
}
</style>